---
title: 编辑器配置
description: 配置与 Astro 一同使用的代码编辑器
i18nReady: true
---

import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
import { Steps } from '@astrojs/starlight/components';
import Badge from "~/components/Badge.astro"

自定义你的代码编辑器，以改善 Astro 开发体验并解锁新功能。

## VS Code

[VS Code](https://code.visualstudio.com) 是由 Microsoft 构建，受网页开发者欢迎的代码编辑器。VS Code 引擎还对云端代码编辑器像 [GitHub Codespaces](https://github.com/features/codespaces) 和 [Gitpod](https://gitpod.io) 提供了支持。

Astro 可以和任意编辑器一同工作。但是，VS Code 是我们推荐的 Astro 项目编辑器。我们维护着一个官方 [Astro VS Code 扩展](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode)，为 Astro 项目提供了几个关键特性并改善开发者体验。

- 为 `.astro` 文件提供语法高亮
- 为 `.astro` 文件提供 TypeScript 类型信息。
- [VS Code 智能提示](https://code.visualstudio.com/docs/editor/intellisense)提供代码补全和提示

开始前需要先安装 [Astro VS Code 扩展](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode)。

import ReadMore from '~/components/ReadMore.astro';

<ReadMore>查看如何在你的 Astro 项目中 [设置 TypeScript](/zh-cn/guides/typescript/)。</ReadMore>

## Zed

[Zed](https://zed.dev/) 是一款专为速度和大规模项目优化的高性能多人协作代码编辑器。其 [Astro 扩展](https://zed.dev/extensions/astro) 提供以下功能：对 `.astro` 文件的语法高亮、代码补全、格式化、诊断检查以及跳转到定义。

## JetBrains IDE

[Webstorm](https://www.jetbrains.com/webstorm/) 是一个 JavaScript 和 TypeScript IDE，从 2024.2 版本开始支持 Astro 语言服务器。此更新带来了语法高亮、代码补全和格式化等功能。

通过 [JetBrains Marketplace](https://plugins.jetbrains.com/plugin/20959-astro) 安装官方插件，或在 IDE 的插件标签页中搜索 "Astro"。你可以在 `Settings | Languages & Frameworks | TypeScript | Astro` 中切换语言服务器。

有关 Webstorm 中 Astro 支持的更多信息，请查看[官方 Webstorm Astro 文档](https://www.jetbrains.com/help/webstorm/astro.html)。

## 其他代码编辑器

我们令人惊喜的社区为其他受欢迎的编辑器维护了几个扩展，它们包括：

- [Open VSX 上的 VS Code 扩展](https://open-vsx.org/extension/astro-build/astro-vscode) <span style="margin: 0.25em;"><Badge text="官方" /></span> - 官方 Astro VS Code 扩展，同时在 Open VSX registry 上分发，可用于 [Cursor](https://cursor.com) 或者 [VSCodium](https://vscodium.com/) 等编辑器。
- [Vim 插件](https://github.com/wuelnerdotexe/vim-astro) <span style="margin: 0.25em;"><Badge class="neutral-badge" text="社区" /></span> - 在 Vim 或 Neovim 中为 Astro 提供语法高亮、缩进和代码折叠支持
- Neovim [LSP](https://github.com/neovim/nvim-lspconfig/blob/master/doc/configs.md#astro) 和 [TreeSitter](https://github.com/virchau13/tree-sitter-astro) 插件 <span style="margin: 0.25em;"><Badge class="neutral-badge" text="社区" /></span> - 为 Neovim 内的 Astro 提供语法高亮、treesitter 解析和代码补全。
- Emacs - 查看 [配置 Emacs 和 Eglot](https://medium.com/@jrmjrm/configuring-emacs-and-eglot-to-work-with-astro-language-server-9408eb709ab0) 的指南<span style="margin: 0.25em;"><Badge class="neutral-badge" text="社区" /></span> - 与 Astro 协作
- [适用于 Sublime Text 的 Astro 语法高亮](https://packagecontrol.io/packages/Astro) <span style="margin: 0.25em;"><Badge class="neutral-badge" text="社区" /></span> - 适用于 Sublime Text 的 Astro 包可在 Sublime Text 包管理器上获取
- [Nova 扩展](https://extensions.panic.com/extensions/sciencefidelity/sciencefidelity.astro/)<span style="margin: 0.25em;"><Badge class="neutral-badge" text="社区" /></span> - 为 Astro 提供语法高亮、智能提示、自动补全

## 云端编辑器

除本地编辑器外，Astro 同样适用于云端托管编辑器，包括：

- [StackBlitz](https://stackblitz.com) 和 [CodeSandbox](https://codesandbox.io) - 运行在你浏览器中的编辑器，并为 `.astro` 文件提供支持并内置语法高亮。无需安装或配置！
- [GitHub.dev](https://github.dev) - 可以将 Astro VS Code 扩展安装为[网页 extension](https://code.visualstudio.com/api/extension-guides/web-extensions) 只能使用部分功能，目前仅支持语法高亮。
- [IDX](https://idx.dev) 和 [Gitpod](https://gitpod.io) - 云上的完整开发环境，可以从 Open VSX 上安装官方 Astro VS Code 扩展。

## 其他工具

### ESLint

[ESLint](https://eslint.org/) 是流行的 JavaScript 和 JSX 的 linter。为了支持 Astro，需要安装[一个由社区维护的插件](https://github.com/ota-meshi/eslint-plugin-astro)。

关于如何为你的项目安装和设置 ESLint 的更多信息，请参见[此插件的用户指南](https://ota-meshi.github.io/eslint-plugin-astro/user-guide/)。

### Stylelint

[Stylelint](https://stylelint.io/) 是流行的 CSS 代码检查工具。为了支持 Astro，需要安装[一个由社区维护的 Stylelint 配置文件](https://github.com/ota-meshi/stylelint-config-html)。

有关安装说明、编辑器集成和其他信息，请参阅该工具的 README 文件。

### Biome

[Biome](https://biomejs.dev/) 是一个面向 Web 的 all-in-one 的 linter 和 formatter。 [Biome 目前对 `.astro` 文件有实验性的支持](https://biomejs.dev/internals/language-support/#html-super-languages-support)，可用于检查和格式化 `.astro` 文件中的 frontmatter。

### Prettier

[Prettier](https://prettier.io/) 是一个流行的 JavaScript、HTML、CSS 等格式化工具。如果你使用 [Astro VS Code 扩展](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode)，Prettier 格式化功能已经内置。

要在编辑器之外（例如 CLI）或者在不支持我们的编辑器工具的编辑器中为 `.astro` 文件添加格式化支持，请安装[官方 Astro Prettier 插件](https://github.com/withastro/prettier-plugin-astro)。

<Steps>
1. 安装 `prettier` 和 `prettier-plugin-astro`。

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npm install --save-dev --save-exact prettier prettier-plugin-astro
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm add --save-dev --save-exact prettier prettier-plugin-astro
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn add --dev --exact prettier prettier-plugin-astro
      ```
      </Fragment>
    </PackageManagerTabs>

2. 在项目根目录创建一个 `.prettierrc` 配置文件（或是 `.prettierrc.json`、`.prettierrc.mjs`, 或是 [其他支持的格式](https://prettier.io/docs/configuration)），并在其中添加 `prettier-plugin-astro`。

    在这个文件中，还需要手动指定 Astro 文件的解析器。

    ```json title=".prettierrc"
    {
      "plugins": ["prettier-plugin-astro"],
      "overrides": [
        {
          "files": "*.astro",
          "options": {
            "parser": "astro"
          }
        }
      ]
    }
    ```

3. （可选）为你的项目安装其他 Prettier 插件，并将它们添加至配置文件中。这些附加的插件可能需要以特定的方式排列。例如，如果你正在使用 Tailwind 的话，那么 `prettier-plugin-tailwindcss` 就必须放置在 [Prettier 插件数组的最后一位](https://github.com/tailwindlabs/prettier-plugin-tailwindcss#compatibility-with-other-prettier-plugins)。

    ```json title=".prettierrc"
    {
      "plugins": [
        "prettier-plugin-astro",
        "prettier-plugin-tailwindcss" // 该项需要在数组的最末尾
      ],
      "overrides": [
        {
          "files": "*.astro",
          "options": {
            "parser": "astro"
          }
        }
      ]
    }
    ```

4. 在你的终端中运行以下的命令来格式化你的文件。

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npx prettier . --write
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm exec prettier . --write
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn exec prettier . --write
      ```
      </Fragment>
    </PackageManagerTabs>
</Steps>

参见 [Prettier 插件的 README](https://github.com/withastro/prettier-plugin-astro/blob/main/README.md)，以获得更多关于其支持的选项、如何在 VS Code 内设置 Prettier 等信息。

### dprint

[dprint](https://dprint.dev/) 是一个高度可配置的代码格式化工具，支持多种语言，包括 JavaScript、TypeScript、CSS 等。可以使用 [markup_fmt 插件](https://github.com/g-plane/markup_fmt) 为 `.astro` 文件添加支持。
